<template>
  <div class="page-box">
    <el-button
      @click="$refs.vinfo.isShow = true"
      class="add-btn"
      size="mini"
      plain
      type="primary"
      icon="el-icon-plus"
         v-permission="'ydd_link@add'"
      >{{ $t("base.add") }}</el-button
    >
    <el-tabs v-model="query.type" @tab-click="tabClick">
      <el-tab-pane name="1" label="文字链接">
        <!-- 自定义表格组件 -->
        <custom-table
          title="友情链接信息"
          :list="list"
          @refresh="refreshListData"
          show-index
          :showAction="false"
          :columns="columnsData1"
          :loading="loading"
        >
          <template slot-scope="{ row }" slot="type">
            <el-tag type="primary" size="small" v-if="row.type * 1 === 1"
              >文字类型</el-tag
            >
            <el-tag type="success" size="small" v-else>图片类型</el-tag>
          </template>

          <!-- 操作列 -->
          <template slot="action" slot-scope="scope">
            <el-button
              @click="edit({ ...scope.row })"
              icon="el-icon-edit"
              type="primary"
              circle
              size="small"
                 v-permission="'ydd_link@update'"
            ></el-button>
            <el-button
              @click="del(scope.row.id)"
              type="danger"
              icon="el-icon-delete"
              circle
              size="small"
                 v-permission="'ydd_link@del'"
            ></el-button>
          </template>
        </custom-table>
      </el-tab-pane>
      <el-tab-pane name="2" label="图片链接">
        <!-- 自定义表格组件 -->
        <custom-table
          title="友情链接信息"
          :list="list"
          @refresh="refreshListData"
          show-index
          :showAction="false"
          :columns="columnsData2"
          :loading="loading"
        >
          <template slot-scope="{ row }" slot="type">
            <el-tag type="primary" size="small" v-if="row.type * 1 === 1"
              >文字类型</el-tag
            >
            <el-tag type="success" size="small" v-else>图片类型</el-tag>
          </template>

          <template slot-scope="{ row }" slot="img">
            <img style="width:120px;" :src="showImage(row.img)" alt="" />

          </template>

          <!-- 操作列 -->
          <template slot="action" slot-scope="scope">
            <el-button
              @click="edit({ ...scope.row })"
              icon="el-icon-edit"
              type="primary"
              circle
              size="small"
                v-permission="'ydd_link@update'"
            ></el-button>
            <el-button
              @click="del(scope.row.id)"
              type="danger"
              icon="el-icon-delete"
              circle
              size="small"
              v-permission="'ydd_link@del'"
            ></el-button>
          </template>
        </custom-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 分页组件 -->
    <Pagination
      :total="total"
      :page.sync="page"
      :page-sizes="pageSizes"
      :limit.sync="limit"
      @pagination="paginationChange"
    />

    <!--  友情链接添加/修改 -->
    <v-info ref="vinfo" @update-list="initData"></v-info>
  </div>
</template>

<script>
import vInfo from './components/info'
import { getListData, delData } from '@/api/adv/link'
import list from '@/mixins/list'
// 默认查询参数
const defaultQuery = { type: '1' }
export default {
  name: 'linkIndex',
  components: {
    vInfo
  },
  data () {
    return {
      // 查询参数
      query: {
        ...defaultQuery
      },
      // 表格显示数据
      columnsData1: [
        { prop: 'title', label: '标题' },
        { prop: 'des', label: '链接描述' },
        { prop: 'type', label: '链接类型', template: 'type' },
        { prop: 'url', label: '链接地址' }
      ],
      columnsData2: [
        { prop: 'des', label: '链接描述' },
        { prop: 'img', label: '链接图片', template: 'img' },
        { prop: 'type', label: '链接类型', template: 'type' },
        { prop: 'url', label: '链接地址' }
      ]
    }
  },
  mixins: [list],
  computed: {
    columnsData () {
      return this['columnsData' + this.query.type]
    }
  },
  methods: {
    // 初始化数据
    async initData () {
      try {
        this.loading = true
        const { query, page, limit } = this
        const { data, count } = await getListData({ ...query, page, limit })
        this.list = data
        this.total = count
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    // tab切换
    tabClick () {
      this.page = 1
      this.total = 0
      this.limit = 10
      this.initData()
    },
    showImage (pic) {
      return pic ? process.env.VUE_APP_WEB_URL + pic : ''
    },
    // 搜索提交
    searchSubmit () {
      this.page = 1
      this.initData()
    },
    // 搜索重置
    searchCancel () {
      this.page = 1
      this.query = { ...defaultQuery }
      this.initData()
    },
    // 删除
    async del (id) {
      try {
        await this.$confirm(this.$t('base.delConfimText'))
        await delData({ id })
        this.$message.success(this.$t('base.delSuccessText'))
        this.initData()
      } catch (e) {
        return this.$message.info(this.$t('base.cancelText'))
      }
    }
  }
}
</script>
<style scoped>
.page-box {
  position: relative;
}
.add-btn {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
  z-index: 1000;
}
</style>
